<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {globalStore} from "@/assets/store-index.js";
const gs = globalStore();


const infoForm = ref({})

const login = () => {
  axios.post("/account/login", infoForm.value).then(response => {
    ElMessage.success(response.message)
    const token = response.data;
    gs.isLogin = true;
    gs.token = token;
    localStorage.setItem("token", token);
  }).catch(error => {
    ElMessage.error(error)
  })
}
</script>

<template>
  <div class="login-box">
    <el-input placeholder="请输用户名" v-model="infoForm.username" style="margin-bottom: 1.5rem"/>
    <el-input placeholder="请输入密码" v-model="infoForm.password" type="password" show-password
              style="margin-bottom: 1.5rem"/>
    <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
  </div>
</template>

<style scoped>
.login-box {
  width: 400px;
  padding: 2rem;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10rem;
  border: 1px solid #ccc;
}
</style>